<script setup>
import {onMounted, ref} from "vue";
import myAxios from "@/plugins/myAxios";
import {Message} from "@arco-design/web-vue";

const columns = [{
  title: 'id',
  dataIndex: 'id',
},{
  title: '菜名',
  dataIndex: 'name',
}, {
  title: '价格',
  dataIndex: 'price',
}, {
  title: '描述',
  dataIndex: 'description',
}, {
  title: '操作',
  slotName: 'optional'
}];
const form = ref({
  id:'',
  name: '',
  price: '',
  description: '',
  search:''
})

const addVisible = ref(false)
const visible = ref(false)


//展示菜品信息
const dishData = ref([])
onMounted(async() => {
  await loadDishData()
})
const loadDishData = async() =>{
  const res = await myAxios.get('/menu/list/dishes');
  if (res){
    dishData.value = res.data.data
    console.log("dish:",dishData.value)
    Message.success('请求成功')
  }else
    Message.error('请求失败')
}

//点击修改按钮
const updateInfo = (record) => {
  form.value.name = record.name
  form.value.description = record.description
  form.value.price = record.price
  form.value.id = record.id
  visible.value = true;
}

const handleOk = async () => {
  const res = await myAxios.post('/menu/dishes/update',{
    id: form.value.id,
    name: form.value.name,
    price: form.value.price,
    description: form.value.description
  })
  if (res){
    Message.success('修改成功')
    await loadDishData()
  }
}
//添加菜品
const addDishOk = async () => {
  const res = await myAxios.post('/menu/dishes/add',{
    name: form.value.name,
    price: form.value.price,
    description:form.value.description
  })
  if (res){
    await loadDishData();
    Message.success('添加成功')
  }else {
    Message.error('添加失败')
  }
}


const handleCancel = () => {
  visible.value = false;
}

//删除菜品信息
const deleteInfo = async (record) => {
  const res = await myAxios.delete(`/menu/dishes/delete/${record.id}`)
  console.log("deleteRes:",res);
  if (res.data.code === '200'){
    Message.success("删除成功")
    await loadDishData()
  }else {
    Message.error(res.data.msg)
  }
}
//搜索功能
const doSearch = async() =>{
  const res = await myAxios.post('/menu/dishes/search',{
    value:form.value.search
  })
  if (res.data.code === '200'){
    dishData.value = res.data.data
    Message.success("查询成功")
  }else {
    Message.error("查询失败")
  }
  console.log("searchRes:",res)
}

//导出Excel文档
const exportData = () =>{
  window.open('http://localhost:8081/menu/dishInfo/export')
}


//批量导入
const handleImport = async (response) =>{
  console.log("response:",response);
  if (response.response.code === '200'){
    await loadDishData()
    Message.success("上传成功")
  }else {
    Message.error("上传失败")
  }
}
const pagination = {pageSize: 9}
</script>

<template>
  <div>
    <div style="margin-bottom: 10px;display: flex">
      <a-button type="primary" @click="addVisible = true">新增</a-button>
      <a-button type="primary" style="margin-left: 10px" @click="exportData">全部导出</a-button>
      <div style="margin-left: 10px">
        <a-space direction="vertical" :style="{ width: '100%' } ">
          <a-upload action="http://localhost:8081/menu/dishInfo/import"  @success="handleImport" :show-file-list="false" />
        </a-space>
      </div>
      <a-space direction="horizontal" size="large" style="margin-left: auto">
        <a-input-search v-model="form.search" :style="{width:'320px'}" placeholder="搜索" @search="doSearch" search-button/>
      </a-space>
      <a-modal v-model:visible="addVisible" title="添加菜品" @cancel="handleCancel" @ok="addDishOk">
        <a-form :model="form">
          <a-form-item field="name" label="菜名">
            <a-input v-model="form.name" />
          </a-form-item>
          <a-form-item field="price" label="价格">
            <a-input v-model="form.price" />
          </a-form-item>
          <a-form-item field="description" label="描述">
            <a-input v-model="form.description" />
          </a-form-item>
        </a-form>
      </a-modal>
    </div>
    <a-table :columns="columns" :data="dishData" :pagination="pagination" style="font-style: normal;font-size: 30px">
      <template #optional="{ record }">
        <a-button type="primary" @click="updateInfo(record)">修改</a-button>
        <a-button style="margin-left: 10px" type="primary" status="danger" @click="deleteInfo(record)">删除</a-button>
        <a-modal v-model:visible="visible" title="修改信息" @cancel="handleCancel" @ok="handleOk(record)">
          <a-form :model="form">
            <a-form-item field="name" label="菜名">
              <a-input v-model="form.name"/>
            </a-form-item>
            <a-form-item field="price" label="价格">
              <a-input v-model="form.price"/>
            </a-form-item>
            <a-form-item field="description" label="描述">
              <a-input v-model="form.description"/>
            </a-form-item>
          </a-form>
        </a-modal>
      </template>
    </a-table>
  </div>

</template>

<style scoped>

</style>